<template>
	<div class="big_screen_model">
		<div class="model_title">
			<img src="/img/bigScreen/005.png" alt="" />
		</div>
		<div class="model_echarts">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>
</template>

<script>
	export default {
		name: '警报趋势',
		data() {
			return {
				option: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.option = {
					textStyle: {
						color: "#b3babe"
					},
					legend: {
						type: "plain",
						top: 10,
						left: "2%",
						textStyle: {
							fontSize: 12
						},

						data: [{
								name: '警报数',
								textStyle: {
									color: "#fff"
								}
							},
							{
								name: '已处理',
								textStyle: {
									color: "#fff"
								}
							}
						]
					},
				    grid: {
				        left: 15,
				        bottom: 10,
				        top: 50,
				        right: 15,
				        containLabel: true
				    },
					xAxis: {
						type: 'category',
						boundaryGap: true,
						axisLabel: {
							fontSize: 12,
							color: '#fff'
						},
				        axisLine: {
				            lineStyle: {
				                type:'dashed',
				                color: '#79a5a5',
				            }
				        },
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#79a5a5',
				                type:'dashed'
				            }
				        },				        
						data:["周一","周二","周三","周四","周五","周六","周日"]
					},
					yAxis: {
				        axisLine: {
				            lineStyle: {
				                type:'dashed',
				                color: '#79a5a5',
				            }
				        },
						axisLabel: {
							fontSize: 12,
							color: '#fff'
						},
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#79a5a5',
				                type:'dashed'
				            }
				        }
					},
					series: [
					{
							name: "警报数",
							data: [150, 200, 400, 90,330,270,80],
							type: 'line',
							smooth: true,
							symbol: 'circle',
							symbolSize: 8,
							showAllSymbol: true,
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#0E9CFF',
									fontSize: 12
								}
							},
							itemStyle: {
								normal: {
									color: '#3A84FF',
									lineStyle: {
										color: "#3A84FF",
										width: 1
									},
									areaStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 1,
											x2: 0,
											y2: 0,
											colorStops: [{
												offset: 0,
												color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#0E9CFF' // 100% 处的颜色
											}]
										}
									}
								}
							}
						},
						{
							name: "已处理",
							data: [400, 354, 180, 450,120,50,70],
							type: 'line',
							
							symbol: 'circle',
							symbolSize: 8,							
							showAllSymbol: true,
							smooth: true,
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#993366',
									fontSize: 12
								}
							},
							itemStyle: {
								normal: {
									color: '#993366',
									lineStyle: {
										color: "#993366",
										width: 1
									},
									areaStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 1,
											x2: 0,
											y2: 0,
											colorStops: [{
												offset: 0,
												color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#993366' // 100% 处的颜色
											}]
										}
									}
								}
							}
						}
					]
				}
			
			}

		}
	}
</script>

<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}
	
	.big_screen_model {
		display: flex;
		flex-direction: column;
		height: 100%;
		.model_title {
			img {
				width: 100%;
				display: block;
			}
		}
		.model_echarts {
			flex: 1;
		}
	}
</style>